<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import LeftPanel from "./form-design/left-panel.vue";
import ContentPanel from "./form-design/content-panel.vue";
import RightPanel from "./form-design/right-panel.vue";
import PreviewForm from "./form-design/modals/preview-form.vue";

// Props定义
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});

// 状态管理
const store = useStore();
const currentItem = ref({});
const previewVisible = ref(false);

// 顶部操作按钮配置
const headerData = [
  { title: "预览" },
  { title: "清空" },
  { title: "导入JSON" },
  { title: "生成JSON" }
];

// 顶部按钮点击处理
const itemClick = (index) => {
  if (index === 0) {
    previewVisible.value = true;
    return;
  }
  if (index === 1) {
    currentItem.value = {};
    store.dispatch("form/updateConfig", []);
    return;
  }
};

// 当前选中项更新
const currentItemClick = (item) => {
  currentItem.value = item;
};
</script>

<template>
  <div class="form">
    <header>
      <el-button
        v-for="(item, index) in headerData"
        :key="item.title"
        type="primary"
        text
        @click="itemClick(index)"
      >
        <span>{{ item.title }}</span>
      </el-button>
    </header>

    <section style="background-color: #f2f3f5;">
      <LeftPanel />
      <ContentPanel
        :list="list"
        @current-item-click="currentItemClick"
      />
      <RightPanel :current-item="currentItem" />
    </section>

    <PreviewForm
      :visible="previewVisible"
      @cancel="previewVisible = false"
    />
  </div>
</template>

<style lang="less" scoped>
.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    width: 100%;
    height: 64px;
    border: 2px solid #f5f5f5;
    background: #fff;

    .icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }

  section {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
